import React, { FC, useEffect, useState } from 'react'
import { Form, Input, Button, Tabs } from 'antd'
import { queryWaitApproveList } from '~/api/approve-api'
import { useNavigate, useLocation } from 'react-router-dom'
import { getUserInfo } from '~/mock/user/userinfo'

import WaitingList from './container/waiting-list'

const { TabPane } = Tabs

interface QueryListProps {
  caseName?: string
  caseNo?: string
}

const Home: FC = () => {
  const [form] = Form.useForm()
  const [waitList, setWaitList] = useState([])
  const navigate = useNavigate()
  const { state, pathname }: any = useLocation()
  const { resetFields } = form
  const { activeKey = '1' } = state || { activeKey: '1' }

  const handleGetQueryWaitList = async (values?: QueryListProps) => {
    const userInfo = getUserInfo()
    const { caseName, caseNo } = values || {}
    const { data } = await queryWaitApproveList({
      ...userInfo,
      caseName,
      caseNo
    })

    setWaitList(data)
  }

  const onFinish = (val: any) => {
    console.log('gg', val)
    handleGetQueryWaitList(val)
  }

  const handleInitData = () => {
    handleGetQueryWaitList()
  }

  useEffect(() => {
    handleInitData()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <div>
      <header>
        <Form validateTrigger="onBlur" layout="inline" form={form} onFinish={onFinish}>
          <Form.Item name="caseNo" label="案件编号：" initialValue={null}>
            <Input placeholder="请输入案件编号搜索" />
          </Form.Item>
          <Form.Item name="caseName" label="案件名称：" initialValue={null}>
            <Input placeholder="请输入案件名称搜索" />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit" type="primary">
              查询
            </Button>
            <Button
              onClick={() => {
                resetFields()
                handleInitData()
              }}
              style={{ padding: 0, marginLeft: 8 }}
              type="link"
            >
              清空选项
            </Button>
          </Form.Item>
        </Form>
      </header>
      <main style={{ marginTop: 21 }}>
        <Tabs
          activeKey={activeKey}
          onChange={(activeKey: string) => {
            navigate(pathname, { replace: true, state: { ...state, activeKey } })
          }}
        >
          <TabPane tab={<span>待借用审批列表({waitList.length})</span>} key="1">
            <WaitingList waitList={waitList} />
          </TabPane>
          {/* <TabPane
            tab={
              <span>
                <AndroidOutlined />
                已审批列表({moveList.length})
              </span>
            }
            key="2"
          >
            <MoveList moveList={moveList} />
          </TabPane> */}
        </Tabs>
      </main>
    </div>
  )
}

export default Home
